<template>
  <div class="home">
    <Head></Head>
    <el-row>
      <el-col span="4">
        <div :span="3" v-for='(value,index) in menuList' :key="index" >
              
            <router-link tag="div" class="littleModel"  :to="{ path: value.linkurl}" >
              <el-row>
                <el-col :span="5" offset="2">
                  <el-image :src="require('../img/littleIcon/'+value.icon+'.png')"></el-image>
                </el-col>
                <el-col :span="10" offset="2">
                    <h3>{{value.name}}</h3>
                    <span>{{value.description}}</span>
                </el-col>
              </el-row>
            </router-link>           
              
        </div>
      </el-col>
      <!--图片轮播-->
      <el-col span="20">
         <div class="block">
          <el-carousel >
            <el-carousel-item v-for="item in imgUrls" :key="item">
              <el-image style="width:90%;height:100%" :src='item'></el-image>
            </el-carousel-item>
          </el-carousel>
        </div><br><br>
        <el-row>
          <el-col :span="15" >
            <el-row>
                <el-col :span="12">
                    <el-image @click="skip()"  :src="require('../img/bigIcon/pic1.png')"></el-image>
                </el-col>
                <el-col :span="12">
                    <el-image  @click="skip()"   :src="require('../img/bigIcon/pic4.png')"></el-image>
                </el-col>
            </el-row><br>
            <el-row>
                <el-col :span="12">
                    <el-image  @click="skip()"   :src="require('../img/bigIcon/pic2.png')"></el-image>
                </el-col>
                <el-col :span="12">
                    <el-image  @click="skip()"  :src="require('../img/bigIcon/pic3.png')"></el-image>
                </el-col>
            </el-row>
                
          </el-col>
          
          <el-col :span="8">
            <div class="vaccinDiv" @click="orderVaccin()">
                    
                    <!--<el-image :src="require('../img/vaccin/vaccinicon.png')"></el-image>-->
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><label style="font-size:30px">疫苗接种</label>
                </div>
          </el-col>
          
        </el-row><br><br>
       
        
      </el-col>
     <!-- <el-col :span="5" >
            <div style="width:250px;text-align:left">
                <el-image style="width:250px" :src="require('../../../src/img/vaccin/rigth1.jpg')"></el-image>
                <h3>小编精选</h3>
                <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                    <el-row>
                        <el-col :span="11">
                            <el-image style="width:130px;" :src="require('../../../src/img/vaccin/rigth2.jpg')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            2021年党龄50年补贴5000元政策：党龄多少发5000元？附中央最新补贴消息
                        </el-col>
                    </el-row>
                </div>
                <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                    <el-row>
                        <el-col :span="11">
                            <el-image style="width:130px;" :src="require('../../../src/img/vaccin/rigth3.jpg')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            北京生物和科兴中维可以混打吗？为何很多人不打科兴疫苗？
                        </el-col>
                    </el-row>
                </div>
                <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                    <el-row>
                        <el-col :span="11">
                            <el-image style="width:130px;" :src="require('../../../src/img/vaccin/rigth4.jpg')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            深圳下十围疫情是怎么回事？最新消息是怎样的？
                        </el-col>
                    </el-row>
                </div>
                <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                    <el-row>
                        <el-col :span="11">
                            <el-image style="width:130px;" :src="require('../../../src/img/vaccin/rigth6.jpg')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            2021年七一建党节放几天？附2021年7月1日放假安排！
                        </el-col>
                    </el-row>
                </div>
                <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                    <el-row>
                        <el-col :span="11">
                            <el-image style="width:130px;" :src="require('../../../src/img/vaccin/rigth5.jpg')"></el-image>
                        </el-col>
                        <el-col :span="12">
                            安徽智飞第二针间隔时间具体是多久？为什么打三针？附接种时间表！
                        </el-col>
                    </el-row>
                </div>
            </div>
      </el-col>-->
    </el-row>

    
       <InformationBottom></InformationBottom>
  </div>
</template>

<script>
import Head from '../components/home/Head.vue'
// @ is an alias to /src
import axios from 'axios'
import png4 from '../img/bigIcon/doctor3.jpg'
import png1 from '../img/bigIcon/doctor4.jpg'
import png2 from '../img/bigIcon/doctor5.jpg'
import png3 from '../img/bigIcon/doctor6.jpg'
import InformationBottom from '../components/healthyInformation/InformationBottom.vue'

export default {
  name: 'Home',
  data() {
    return {
      imgUrls:[png1,png2,png3,png4],
      menuList:[]
    }
  },
  components: {
    Head,
    InformationBottom 

  },
  methods:{
    initMenu(){
        axios.post("menu/queryAllMenus").then((response)=>{
          //alert(response.data);
          this.menuList=response.data;
        })
    },
    orderVaccin(){
      this.$router.push("/vaccinType")
    },
    skip(){
      this.$router.push("/setmeal")

    }
  },
  mounted(){
    this.initMenu();
  }


}
</script>
<style>
    .littleModel{
      margin-top:3px;
      width: 280px;
      height: 120px;
      background-color:white;
      background-repeat: no-repeat;
      background-position: left top;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
      /*border-radius: 30px*/
    }
    .littleModel h3{
      /*font-size: 20px;*/
      line-height: 40px;

    }
    .littleModel span{
      /*line-height: 10px;*/
      /*margin-top: 10px;*/
      color: gray;

    }
    .littleModel img{
      padding-top: 30px;
      width: 50px;
      height: 50px;
     
    }
   /* .el-image{
      overflow:visible;
    }*/
    body{
      background-color: azure;
    }
    .vaccinDiv{
      background-color: white;
      background-image: url('../img/bigIcon/pic5.png');
      height: 355px;
      width: 430px;
    }
    
</style>
